Videos uploaden & bearbeitenModul „media“

Inhalt

Vorbereiten von Videos für Webseiten (Voraussetzungen)

Um Videodateien von Ihrem eigenen Server anzubieten, ist es sinnvoll, diese für eine Verwendung im Web vorzubereiten. Dies bedeutet, dass die Auflösung und die Dateigröße so weit wie möglich zu reduzieren und dennoch eine gewisse Qualität zu liefern. Videos in 4K-Auflösung sind bspw. für das Web unnötig und benötigen zu viel Speicher, der beim Anschauen des Videos übertragen werden muss. 

Voraussetzungen für eine Video-Datei

  1. Check „Format: MP4“: Benötigt wird das web-abspielbare MP4-Format. Ihr müsst prüfen, ob das Video sich im Browser abspielen lässt. Am einfachsten nach dem Upload in der Mediathek auf die Vorschau klicken.
  2. Check „Audio benötigt?“: Soll ein Video bei Seitenaufruf abgespielt werden, muss die Audioausgabe deaktiviert sein. Somit kann man das Audio auch gleich weglassen.
  3. Check „Videoformat – Breite * Höhe“: Denkt hier bitte an Smartphone, Tablet + Desktop. Ein Video im Desktop ist oft breit und wenig hoch. Skaliert man dieses Video herunter auf die Smartphone-Ansicht, ist der Inhalt auf dem Smartphone kaum zu erkennen.
  4. Check „Video-Größe“: Die Dateigröße des Videos muss möglichst klein sein.
    Wie groß ein Video sein darf, müsst Ihr berechnen: Schaut Euch dazu mal die Video-Länge + die Dateigröße an. Der Browser lädt das Video in 10-Sekunden-Abschnitten, lädt also die Daten von den kommenden 10 Sekunden herunter.
    Beispiel: Das Video ist 0:20 Minuten lang und hat 400 MB. Dann lädt der Browser für die ersten 10 Sekunden (beim Starten des Videos) zuerst 200 MB und dann erneut 200 MB herunter. In dem Fall ist die Gefahr groß, dass das Video stottert, da 200 MB nur selten unterhalb einer Sekunde heruntergeladen wird. 

Web Video-Größen-Rechner:

Mbit/s DSL-Leitung
Erstladezeit:
* Theoretischer Optimal-Wert bei 100% Download-Leistung.
Aus Nostalgie-Gründen auch noch das gute alte 56k-Modem 😂:
Erstladezeit:

… und jetzt noch die Lieferzeit in Tage der Disketten:
Lieferzeit:
3-5 Tage

Je nach verwendetem Videoprogramm ist das Vorgehen hierzu anders.
In Adobe Premiere können Sie bspw. so vorgehen:
  1. Exportieren Sie Ihr fertiges Video über den Reiter “Exportieren”.
  2. Wählen Sie als Vorgabe “Twitter 1080p Full-HD" oder “Twitter 720p HD”.
  3. Expandieren Sie den Bereich “Video” und klicken Sie anschließend den Button “Mehr”.
  4. Ändern Sie den Wert in “Zielbitrate [MBit/s]” auf “2” (sollte die Videodatei noch zu groß sein, kann man auch bis auf “1” reduzieren).
  5. Klicken Sie zum Abschluss auf “Exportieren”, um Ihr weboptimiertes Video zu erstellen.
Und in DaVinci Resolve funktioniert der Export wie folgt:
  1. Klicken Sie in den Tab “Deliver”.
  2. Wählen Sie im Reiter “Video” aus dem Dropdown “Format” den Wert “MP4”.
  3. Wählen Sie aus dem Dropdown “Resolution” den Wert 1920 x 1080 HD”.
  4. Setzen Sie den Radio-Button im Feld “Quality” auf “Restrict to” und geben Sie den Wert “2000” ein.
  5. Wechseln Sie in den Reiter “Audio” und ändern Sie den Wert im Feld “Track Data Rate” auf “128”.
  6. Fügen Sie Ihr Video mit einem Klick auf “Add to Render Queue” zur Render-Warteschlange hinzu.
  7. Rendern Sie Ihr Video final mit einem Klick auf “Render all” in der Render-Warteschlange.

Upload von Videos

Der einfache Upload

Media Upload Video Einfach
  • Ziehen Sie die mp4-Datei via Drag&Drop in die Media-Upload-Maske und aktivieren Sie den Schalter „MP4-Dateien als HTML5-Video anlegen“ bei den Optionen in der Upload-Maske.
  • Klicken Sie dann auf die „save“-Schaltfläche.
  • Jedes Webseiten-Video (auch HTML5-Video genannt) benötigt ein Vorschaubild – mehr dazu im folgenden Absatz „Vorschaubild hinzufügen + ändern“

Der manuelle Upload

Media Upload Video Manuell
  1. Navigieren Sie zuerst in den gewünschten Mediaordner.
  2. Wählen Sie anschließen über die 3-Punkte „HTML5-Video Upload“.
  3. Vergeben Sie in der nun angezeigten Maske einen Namen mit der Endung „.mp4“ und klicken Sie auf „save“.
  4. Fügen Sie jetzt im Bereich „Video Dateien“ mindestens eine mp4-Video-Datei hinzu. Zusätzlich können Sie weitere Video-Formate wie webm + ogg hinterlegen.

Vorschaubild hinzufügen + ändern

Für gutes Ranking, eine schnell ladende Seite und einer sofortigen Übersicht der Video-Inhalte, wird ein Vorschaubild empfohlen. Ein Video wird auch ohne Vorschaubild im Frontend abgespielt. Im Standard-Video-Player wird in diesem Fall immer der erste Frame angezeigt.
Video Datei Vorschaubild
  1. Wählen Sie die 3 Punkte am Thumbnail der Video-Datei oder führen Sie einen Rechtsklick aus.
  2. Wählen Sie „Bearbeiten des Media-Datensatzes“ aus dem Kontextmenü.
  3. Navigieren Sie zum Bereich „Video Dateien“.
  4. Klicken Sie im Abschnitt „jpg- / png-Thumbnail“ auf den Button „wählen“.
  5. Laden Sie im folgenden Popup Ihr Thumbnail per Drag & Drop hoch.
  6. Alternativ: Können Sie das Vorschaubild auch über die „add“-Schaltfläche hochladen.
Über die „add“-Schaltfläche können Sie alternativ Video oder Bilder austauschen und hinzufügen. Der Upload erkennt automatisch, welches Element ergänzt oder ersetzt werden soll.

SEO-Vorbereitung eines Videos

MP4-Datei in HTML5-Video konvertieren

Für gewöhnlich wandelt bee.tools beim Upload von MP4-Dateien diese automatisch in HTML5-Videos um. Sollten Sie dennoch ein Video in Ihrer Mediathek vorfinden, das noch nicht konvertiert wurde, gehen Sie wie folgt vor:
  1. Aktivieren Sie die Checkbox am Thumbnail, um die Massenbearbeitung zu aktivieren.
  2. Klicken Sie unterhalb der Ordneransicht auf das Dropdown “Aktion”.
  3. Wählen Sie den Punkt “Alle markierten mp4-Dateien als HTML5-Video speichern”.
  4. In der folgenden Maske erhalten Sie eine Übersicht aller Dateien, die in ein HTML5-Video umgewandelt werden.
  5. Klicken Sie den Button “save”.
  6. Fügen Sie anschließend ein passendes Thumbnail zu Ihrem Video hinzu (s. “Upload von Videos”).

Vorschaubild von einem Video erstellen

Der einfachste Weg, ein geeignetes Vorschaubild zu einem Video zu erstellen ist die Screenshot-Funktion:
  1. Spielen Sie das Video im Vollbildmodus auf Ihrem PC/Mac ab, pausieren Sie es an passender Stelle
  2. Verwenden Sie die Screenshot-Funktion Ihres Video-Players, um einen JPG-Screenshot zu erzeugen.
    Alternativ können Sie auch eine Bildschirmkopie durchführen, achten Sie hier jedoch darauf, dass sämtliche Steuerelemente ausgeblendet sind.

Videos mit Untertitel

bee.tools ermöglicht es auch, Untertitel für Ihre Videos anzulegen und zu ändern. Dies hat den großen Vorteil, dass Besucher mit Höreinschränkungen oder Leute, denen es gerade nicht möglich ist, Ton wiederzugeben, die Inhalte Ihrer Videos trotzdem erleben können. Wie dies funktioniert, erfahren Sie in unserem Magazinbeitrag “Videos auf der Webseite: Tricks, Einstellungen und Nutzen”

Video-Sitemap

Weitere Hilfeseiten

Bedienungsanleitung